import React, { useEffect, useState } from 'react'
import { Modal } from 'antd'
import { FlexCenterd } from '~/styles/commonstyle'
import Vector from '~/assets/common/vector.png'
import { useNavigate } from 'react-router-dom'

const SuccessModal = ({ visible }: any) => {
  let resultCount = 3
  let timeId = -1
  const navigate = useNavigate()
  const [count, setCount] = useState(3)

  const handldCountdown = () => {
    if (resultCount === 0) {
      navigate(-1)
      return
    }
    resultCount--
    setCount(resultCount)
    timeId = setTimeout(() => {
      handldCountdown()
    }, 1000)
  }

  useEffect(() => {
    if (!visible) {
      clearTimeout(timeId)
      return
    }
    handldCountdown()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visible])
  return (
    <Modal footer={null} visible={visible} destroyOnClose={true}>
      <FlexCenterd style={{ flexDirection: 'column' }}>
        <img style={{ width: 70, marginBottom: 25 }} src={Vector} />
        <p
          style={{
            fontWeight: 500,
            fontSize: 24,
            color: '#000000'
          }}
        >
          提交成功
        </p>
        <p>
          <span style={{ color: 'red' }}>{count}</span> 秒后返回，如果浏览器没有自动跳转，请点击{' '}
          <span
            style={{ color: '#3370da', cursor: 'pointer' }}
            onClick={() => {
              navigate(-1)
            }}
          >
            返回
          </span>
        </p>
      </FlexCenterd>
    </Modal>
  )
}

export default SuccessModal
